<template>
  <div class="container disabled-click">
    <a-carousel autoplay :after-change="onChange">
      <div
        class="banner"
        v-for="(item, index) in list"
        :style="{
          background: 'url(' + item.backgroundImage + ')',
          backgroundSize: '100% 100%',
        }"
        :key="index"
        @click.stop="handleEnter"
      >
        <div class="hd-topic">
          <h1>{{ item.tips }}</h1>
        </div>
        <div class="hd-input">
          <a-input
            ref="inputRef"
            @keyup.enter="handleEnter"
            v-focus
            v-model="orderId"
          >
          </a-input>
        </div>
      </div>
    </a-carousel>
  </div>
</template>

<script>
const HD_SETIING = "SETTING";
export default {
  name: "Welcome",
  data() {
    return {
      //HD2-20200415001
      //HD2-20210902005
      orderId: "",
      list: [
        {
          backgroundImage: require("../../assets/banner2.jpg"),
          title: "",
          url: "scaninfo",
          tips: "请扫描手机二维码进行打印",
        },
      ],
    };
  },
  watch: {
    orderId: function (value, oldVal) {
      console.log(value);
      if (value.length > 10 || value == HD_SETIING) {
        this.timeOuter = setTimeout(() => {
          this.handleEnter();
        }, 1000);
      }
    },
  },

  mounted() {
    this.interval = setInterval(() => {
      if (this.$refs.inputRef) {
        this.$refs.inputRef[0].$el.focus();
      }
    }, 1000);
  },
  destroyed() {
    clearInterval(this.interval);
    clearTimeout(this.timeOuter);
  },
  methods: {
    handleEnter() {
      if (this.orderId == HD_SETIING) {
        console.log("OrderId is :" + this.orderId);
        this.$router.push({ path: "/setting" });
        return;
      }
      if (!this.orderId) {
        console.log("orderId:" + this.orderId);
        return;
      }
      this.$router.push({
        name: "ScanInfo",
        params: {
          orderId: this.orderId,
        },
      });
    },
    onChange(a, b, c) {
      // console.log(a, b, c);
    },
    onClick() {
      this.$refs.inputRef[0].$el.focus();
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 75vh;
  h1 {
    margin-top: 20vh;
  }
  .slick-dots {
    height: auto;
    width: 100%;
  }
  .ant-carousel /deep/ .slick-slide {
    text-align: center;
    /* height: 160px; */
    /* line-height: 160px; */
    /* background: #364d79; */
    overflow: hidden;
  }
  .ant-carousel /deep/ .slick-slide h1 {
    font-size: 4rem;
  }
  .ant-carousel /deep/ .slick-slide .banner {
    width: 100% !important;
    height: 75vh !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    .hd-topic h1 {
      color: white;
    }
    .hd-input {
      input {
        width: 50vw;
        font-size: 2rem;
        height: inherit;
      }
    }
  }
}
</style>
